<template>
  <div class="big">
    <div class="top">
      <div class="input">
        <img
          src="https://img.ljcdn.com/beike/arsenal/1558325041803.png"
          alt=""
          @click="gosearch"
        />
        <input
          type="text"
          @change="search"
          placeholder="请输入需要查询的经纪人"
          placeholder-style="color:#F6E6E2"
        />
      </div>
      <div class="ranking_list">
        <div class="left" @click="bindViewTab">
          <img
            class="abso_img"
            src="https://images.sqfcw.com/attachment/information/20200602/4aefce6cd5625762b7b3379e13f85e75af330ebf.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <img
            class="abso_logo"
            src="https://images.tengfangyun.com/images/new_icon/No2.png"
            alt=""
          />
          <h2 class="abso_h2">李群</h2>
        </div>
        <div class="middle" @click="bindViewTabs">
          <span class="abso_span">
            <img
              class="abso_img"
              src="https://images.sqfcw.com/attachment/config/20201026/17da3579a81159dc87cb285ea6ce159d8b1ffcf5.png?x-oss-process=style/w_120"
              alt=""
            />
            <img
              class="abso_quan"
              src="https://images.tengfangyun.com/images/new_icon/bg_touxiang%403x.png"
              alt=""
            />
          </span>
          <img
            class="abso_logo"
            src="https://images.tengfangyun.com/images/new_icon/No1.png"
            alt=""
          />

          <h2 class="abso_h2">殷晗</h2>
        </div>
        <div class="right" @click="bindViewTabss">
          <img
            class="abso_img"
            src="https://images.sqfcw.com/attachment/information/20201113/0500bccd7d87865f580d07893d08c9bf83320c39.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <img
            class="abso_logo"
            src="https://images.tengfangyun.com/images/new_icon/No3.png"
            alt=""
          />
          <h2 class="abso_h2">陈冬红</h2>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 美丽 -->
      <div class="main_meili" @click="bindViewTabmeili">
        <div class="meili_left">
          <h3>04</h3>
          <img
            src="https://images.sqfcw.com/attachment/information/20201204/f56558c6a2de646c2ca757c90e408cc9d5f5cbf0.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <span>
            <h2>侍美丽</h2>
            <p>易居房产</p>
          </span>
        </div>
        <div class="meili_right">
         <span class="iconfont icon-xiaoxi" style="color:'red'"></span>
         <span id="" class="iconfont icon-weibiaoti-"></span>
        </div>
      </div>
      <!-- 精馏 -->
      <div class="main_jingliu" @click="bindViewTabjingliu">
        <div class="meili_left">
          <h3>05</h3>
          <img
            src="https://images.sqfcw.com/attachment/information/20200708/d659971b0632bcf0f3093fb2c8b713223525c3d3.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <span>
            <h2>朱景毓</h2>
            <p>腾达房产</p>
          </span>
        </div>
        <div class="meili_right">
         <span class="iconfont icon-xiaoxi" style="color:'red'"></span>
         <span id="" class="iconfont icon-weibiaoti-"></span>
        </div>
      </div>
      <div class="main_shanshan" @click="bindViewTabshanshan">
        <div class="meili_left">
          <h3>06</h3>
          <img
            src="https://images.sqfcw.com/attachment/information/20201211/59aeda78db39c81d38e6f02f6115c67f759dbbd8.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <span>
            <h2>孙杉杉</h2>
            <p>丫丫找房</p>
          </span>
        </div>
        <div class="meili_right">
         <span class="iconfont icon-xiaoxi"></span>
         <span id="" class="iconfont icon-weibiaoti-"></span>
        </div>
      </div>
      <div class="main_xiaoxu" @click="bindViewTabxiaoxu">
        <div class="meili_left">
          <h3>07</h3>
          <img
            src="https://images.sqfcw.com/attachment/information/20201218/9ce844695564a7cd09b79b52698b0a80fe93f16e.jpeg?x-oss-process=style/w_120"
            alt=""
          />
          <span>
            <h2>小徐</h2>
            <p>徐赛</p>
          </span>
        </div>
        <div class="meili_right">
        <span class="iconfont icon-xiaoxi" style="color:'red'"></span>
         <span id="" class="iconfont icon-weibiaoti-"></span>
        </div>
      </div>
      <div class="main_xiaofang" @click="bindViewTabxiaofang">
        <div class="meili_left">
          <h3>08</h3>
          <img
            src="https://images.sqfcw.com/attachment/config/20201102/f93dde46d5b5e10a2ade3fd4cc708ed67ed43ff4.png?x-oss-process=style/w_120"
            alt=""
          />
          <span>
            <h2>陈晓芳 房产中介 137739</h2>
            <p>易居房产</p>
          </span>
        </div>
        <div class="meili_right">
        <span class="iconfont icon-xiaoxi" style="color:'red'"></span>
         <span id="" class="iconfont icon-weibiaoti-"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "./index.scss";
import "../../font_5gow75u3zef/iconfont.css"

export default {
  data() {
    return {
      value: "",
      data: [
        {
          title: "李群",
        },
        {
          title: "殷晗",
        },
        {
          title: "陈冬红",
        },
        {
          title: "侯美丽",
        },
        {
          title: "朱景毓",
        },
        {
          title: "孙杉杉",
        },
        {
          title: "小徐",
        },
        {
          title: "陈晓芳 房产中介 137739",
        },
      ],
      newList: [],
    };
  },
  methods: {
    search(e) {
      this.value = e.detail.value;
    },
    gosearch() {
      // 筛选数据
      let res = this.data.filter((item) => item.title.includes(this.value));
      console.log(res);
      // 重新赋值
      this.newList = res;
    
    },

    bindViewTab: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },

    // 点击事件
    bindViewTabs: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabss: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabmeili: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabjingliu: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabjingshanshan: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabxiaoxu: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
    bindViewTabxiaofang: function () {
      wx.navigateTo({
        //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
        url: "/pages/detail/brokerDetail",
      });
    },
  },
};
</script>

